<template>
 <!-- 展示区 -->
 <div class="col-xs-6 panel panel-body panel-primary" ref="div">
			<h2>二级路由</h2>
			<hr>
			<div class="box">
				<span>
					<router-link to="/home/news">新闻</router-link>
				</span>
				
	
			<router-link to="/home/message">消息</router-link>
			</div>
			

			<!-- 出口 -->
			<div>
				<router-view></router-view>
			</div>
		</div>
</template>

<script setup lang="ts">
import {ref,onMounted,nextTick} from 'vue'

const div = ref()
onMounted(() => {
	nextTick(()=>{
		div.value.style.background = `rgb(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255})`
	})
})	
</script>

<style scoped>
.box{
	margin:  15px;
	color: red;
}
span{
	margin: 20px;
}
</style>